<template>
  <div class="top_nav-wrapper">
    <template v-for="(nav, index) in navs">
      <el-popover :disabled="!nav.component" :key="index" :width="nav.width" class="i-nav" trigger="hover">
        <!-- 这里用了异步组件, 以组件名动态加载. 比slot优 -->
        <component v-bind:is="nav.component" />
        <mivaLink :to="nav.to" class="b-link" slot="reference">
          <i :class="nav.icon" class="iconfont" />
          {{nav.name}}
        </mivaLink>
      </el-popover>
    </template>
  </div>
</template>

<script>
export default {
    props: {
        navs: Array,
    },
};
</script>

<style lang="less">
.top_nav-wrapper {
  height: @headNavHeight;
  display: flex;
  user-select: none;
  z-index: 1;
  .i-nav {
    display: flex;
    padding: 0 7px;
    font-size: 12px;
    background-color: hsla(0, 0%, 100%, 0);
    &:hover {
      background-color: hsla(0, 0%, 100%, 0.3);
    }
  }
  .b-link {
    height: @headNavHeight;
    line-height: @headNavHeight;
  }
  .iconfont {
    font-weight: bold;
    color: @base_color;
  }
}
</style>
